package com.example.finalhomework.cardgame

import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import coil.compose.rememberImagePainter
import com.example.finalhomework.cardgame.ui.loadUserInfo
import java.net.URLEncoder
import java.nio.charset.StandardCharsets


@Composable
fun PersonalInfoScreen(navController: NavController) {
    // 获取当前上下文
    val context = LocalContext.current
    // 加载用户信息
    val userInfo = loadUserInfo(context)
    val defaultAvatarUri = "android.resource://${context.packageName}/drawable/avatar"

    // 打印加载的用户信息
    Log.d("PersonalInfoScreen", "Loaded user info: $userInfo")

    // 使用Column布局来垂直排列组件
    Column(
        modifier = Modifier
            .fillMaxSize() // 填充整个屏幕
            .padding(16.dp) // 设置内边距
            .verticalScroll(rememberScrollState()), // 使内部内容可滚动
        horizontalAlignment = Alignment.CenterHorizontally // 水平居中对齐
    ) {
        // 使用Row布局来水平排列组件
        Row(
            verticalAlignment = Alignment.CenterVertically // 垂直居中对齐
        ) {
            val avatarUri = userInfo.avatarUri ?: defaultAvatarUri
            Image(
                painter = rememberImagePainter(avatarUri),
                contentDescription = "Avatar",
                modifier = Modifier
                    .size(140.dp) // 设置图片大小
                    .clip(CircleShape) // 将图片裁剪为圆形
                    .border(2.dp, Color.Black, CircleShape), // 添加圆形边框
                contentScale = ContentScale.Crop // 确保图片填充整个圆形区域
            )
            Spacer(modifier = Modifier.width(16.dp)) // 添加水平间距

        }
        Spacer(modifier = Modifier.height(16.dp)) // 添加垂直间距
        // 显示用户信息
        PersonalInfoRow(label = "Name:", value = userInfo.name)
        PersonalInfoRow(label = "Gender:", value = userInfo.gender)
        PersonalInfoRow(label = "Student ID:", value = userInfo.studentId)
        PersonalInfoRow(label = "Phone:", value = userInfo.phone)
        PersonalInfoRow(label = "Email:", value = userInfo.email)
        PersonalInfoRow(label = "Hobbies:", value = userInfo.hobbies)
        PersonalInfoRow(label = "BestScore1:", value = userInfo.highestScore.toString())
        PersonalInfoRow(label = "BestScore2:", value = userInfo.advancedHighestScore.toString())

        Spacer(modifier = Modifier.height(16.dp)) // 添加垂直间距
        // 编辑信息按钮，点击时导航到UpdateInfo页面
        Button(onClick = {
            val avatarUri = userInfo.avatarUri ?: defaultAvatarUri
            val encodedAvatarUri = URLEncoder.encode(avatarUri, StandardCharsets.UTF_8.toString())
            navController.navigate("UpdateInfo/${userInfo.name}/${userInfo.gender}/${userInfo.studentId}/${userInfo.phone}/${userInfo.email}/${userInfo.hobbies}/$encodedAvatarUri")
            Log.d("PersonalInfoScreen", "Edit Info button clicked, navigating to UpdateInfo")
        }) {
            Text(text = "Edit Info")
        }
    }
    Log.d("PersonalInfoScreen", "Composable function executed")
}

@Preview
@Composable
fun PreviewPersonalInfoScreen() {
    PersonalInfoScreen(navController = NavController(LocalContext.current))
}
